<template>
    <div class="divisionLeaderConfiguration-increase">
        <!-- 新增弹窗 -->
        <a-modal
         :visible="visibleShow" 
         :title="addEditParameter.id?'编辑':'新增'" 
         @ok="handleOk" 
         :confirmLoading="confirmLoading"
         @cancel="visibleShow = false">
         <a-spin size="large" :spinning="spinning">
            <div class="fgld-table-box" v-if="visibleShow">
                <div style="margin: 10px;">
                    <p>
                        <span style="font-weight: 600;color: #5ca3e5;">当前选中用户：{{ formState.realname }}</span>
                    </p>
                    
                    <selectTable :rowSelection="{type:'radio',selectedRowKeys:formState.fuserid?[formState.fuserid]:[]}" :columns="userColumns" :dataSource="userDataSource" @onChange="userChange"/>
                </div>

                <div style="margin: 10px;">
                    <p>
                        <span style="font-weight: 600;color: #5ca3e5;">当前选中部门：{{ formState.orgName }}</span>
                    </p>
                    <selectTable :rowSelection="{type:'radio',selectedRowKeys:formState.fdeptid?[formState.fdeptid]:[]}" :columns="depColumns" :dataSource="depDataSource" @onChange="depChange"/>
                </div>
            </div>
        </a-spin>
            
            
        </a-modal>
    </div>
</template>
<script>
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import compSelector from '@/components/compSelector/compSelector'
import validator from '@/common/validator'
import selectTable from '@/components/compTable/selectTable.vue'
import {addServe, editServe,ocalityPostAction,UserAndDeptListServe} from './service/index'
export default {
    components:{
        compSelector,
        selectTable
    },
    props:{
        addEditParameter:{
            type:Object,
            default:[]
        }
    },
    data(){
        return{
            spinning:true,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            visibleShow:false,
            confirmLoading:false,
            typeSelect:typeSelect,
            formState:{},
            formRequer:'',
            optionsArr:[],
            submittedSuccessfully:false,
            userColumns:[{
                title: '用户名称', //列头显示文字
                dataIndex: 'realname',
                key: 'realname',
            }],
            depColumns:[{
                title: '部门名称', //列头显示文字
                dataIndex: 'orgName',
                key: 'orgName',
            }],
            userDataSource:[],
            depDataSource:[],
        }
    },
    watch:{
        addEditParameter(newval,oldVal){
            this.spinning = true
            //console.log('给了什么啊',newval)
            this.formState = {
                fdeptid:newval.fdeptid?newval.fdeptid:'',
                fuserid:newval.fuserid?newval.fuserid:'',
                realname:newval.realname?newval.realname:'',
                orgName:newval.orgName?newval.orgName:'',
            }
            if(newval.id){
                this.formState.id = newval.id
            }
        }
    },
    created(){
        UserAndDeptListServe().then(res=>{
            if(res.code == 200){
                this.userDataSource = res.result.userList
                this.depDataSource = res.result.deptList
            }
        })
    },
    mounted(){
        
        if(this.addEditParameter.id){
            this.formState.id = this.addEditParameter.id
        }
        
    },
    updated(){
        this.cancelLoading()
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        userChange(val,item){
            //console.log(val,item)
            this.formState.fuserid = val[0]
            this.formState.realname = item[0].realname
        },
        depChange(val,item){
            //console.log(val,item)
            this.formState.fdeptid =val[0]
            this.formState.orgName =item[0].orgName

        },
        handleSubmit(e) {
            
            if(!this.formState.fuserid){
                this.$message.warning('请选择用户')
                return false
            }
            if(!this.formState.fdeptid){
                this.$message.warning('请选择部门')
                return false
            }
            var formState = {
                fuserid:this.formState.fuserid,
                fdeptid:this.formState.fdeptid
            }
            this.confirmLoading = true
            if(this.formState.id){
                editServe(formState).then(res=>{
                    if(res.code == 200){
                        this.submittedSuccessfully = true
                        this.$message.success('修改成功')
                        this.confirmLoading = false
                        this.visibleShow = false
                        this.$emit('handleOk',true,this.formState.id)
                    }else{
                        this.$message.warning(res.message)
                        this.confirmLoading = false
                    }
                })
            }else{
                addServe(formState).then(res=>{
                    if(res.code == 200){
                        this.$message.success('添加成功')
                        
                        this.submittedSuccessfully = true
                        this.confirmLoading = false
                        this.visibleShow = false
                        this.$emit('handleOk',true,'')
                    }else{
                        this.$message.warning(res.message)
                        this.confirmLoading = false
                    }
                })
            }
            
            
        },
        handleOk(){
            
            this.handleSubmit()
        }
    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */
.divisionLeaderConfiguration-increase{


    .ant-modal-title{
        font-weight: 600;
    }
    .ant-modal-header{
        background: #5ca3e5;
    }
    .ant-upload-list{
        display: none !important;
    }
    .ant-modal-footer .ant-btn-primary{
        border: 1px solid #5ca3e5 !important;
        background-color: #5ca3e5 !important;
        color: #fff !important;
    }
    .fgld-table-box{
        display: flex;
        justify-content: space-around;
    }
    .ant-modal{
        width: 800px;
    }
}
</style>